<template>
  <!-- 角色选择 -->
  <van-popup
    :value="value"
    round
    lock-scroll
    :close-on-click-overlay="closeOnClickOverlay"
    position="bottom"
    @click-overlay="onClickOverlay"
  >
    <van-picker
      title="选择角色"
      show-toolbar
      cancel-button-text=" "
      value-key="roleName"
      :columns="userRoles || []"
      @confirm="onConfirmRole"
    />
  </van-popup>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';

  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      closeOnClickOverlay: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters('user', ['userRoles', 'userRole'])
    },
    methods: {
      ...mapMutations('user', ['setUserRole']),
      onClickOverlay() {
        if (this.closeOnClickOverlay) {
          this.$emit('input', false);
        }
      },
      onConfirmRole(data) {
        this.setUserRole(data);
        this.$emit('change', data);
        this.$emit('input', false);
      }
    }
  };
</script>

<style scoped lang="less">
  /deep/ .card__title {
    font-size: 20px;
    font-weight: 500;
  }

  .menu,
  .van-popup {
    /deep/ .van-grid-item__icon {
      font-size: 59px;
    }

    /deep/ .van-grid-item__text {
      font-size: 14px;
      line-height: 20px;
    }
  }

  .module /deep/ .card-content {
    display: flex;
  }

  .menu-module {
    flex: 1;
  }
</style>
